<!--
  - Copyright (C) 2024
  - All rights reserved, Designed By www.joolun.com
  - 注意：
  - 本软件为www.joolun.com开发研制，未经购买不得使用
  - 购买后可获得全部源代码（禁止转卖、分享、上传到码云、github等开源平台）
  - 一经发现盗用、分享等行为，将追究法律责任，后果自负
-->
<!--直播间 弹幕聊天信息-->
<template>
	<view class="live-msg-box" :style="{ bottom: boxBottom + 'px' }">
		<scroll-view id="id-live-message-scrollview" :class="['live-message-scroll']" :show-scrollbar="false" :scroll-y="true" :scroll-top="scrollTop">
			<view id="id-msg-list">
				<view v-for="(item, index) in liveMsgList" :key="index" class="live-msg-item">
					<!--店铺用户头像-->
					<image v-if="item.userType == '1'" :src="shopInfo.imgUrl" class="shop-avatar" />
					<text v-if="item.content == '$LikeMsg$'" class="user-name">{{ item.nickName }} 给你点赞了~</text>
					<text v-if="item.content == '$JoinLive$'" class="user-name">{{ item.nickName }} 来了~</text>
					<!--用户文本内容-->
					<text v-if="item.content != '$LikeMsg$' && item.content != '$JoinLive$'" :class="[index === 0 ? 'sys-name' : item.userType == '1' ? 'shop-name' : 'user-name']">
						{{ item.nickName }}：
					</text>
					<!--文本内容 一个个显示保证能够连接昵称和换行-->
					<text v-if="item.content != '$LikeMsg$' && item.content != '$JoinLive$'" v-for="(text, cInx) in item.content" :key="`c_${cInx}`" class="content">
						{{ text }}
					</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	props: {
		sysInfo: {
			type: Object,
			default() {
				return {};
			}
		},
		liveInfo: {
			type: Object,
			default() {
				return {};
			}
		},
		liveMsgList: {
			type: Array,
			default() {
				return [];
			}
		},
		shopInfo: {
			type: Object,
			default() {
				return {};
			}
		},
		/**
		 * 是否是主播
		 */
		isAnchor: {
			type: Boolean,
			default: false
		}
	},
	watch: {
		liveMsgList: {
			handler(newVal) {
				try {
					// 初始化 滚动条高度
					this.$nextTick(() => {
						if (this.isIOS) {
							// #ifdef APP
							this.msgSrcoll();
							// #endif
							// #ifndef APP
							// this.msgSrcoll();
							this.scrollTop = Number(this.scrollTop) + Number(newVal.length * 40);
							// #endif
						} else {
							// #ifdef APP
							this.msgSrcoll();
							// #endif
							// this.scrollTop = Number(this.scrollTop) + Number(newVal.length * 40);
						}
					});
				} catch (e) {
					console.log(e);
				}
			},
			immediate: true,
			deep: true
		}
	},
	data() {
		return {
			scrollTop: 0,
			boxWidth: 0,
			boxHeight: 0,
			boxBottom: 0, // 隔离出底部输入框的高度
			scrollHeight: 0,
			msgListHeight: 0, //消息内容高度,用于自动滚动到最新一条弹幕
			isIOS: false //是否为iOS手机
		};
	},
	mounted() {
		this.isIOS = uni.getSystemInfoSync().platform === 'ios';
		this.initView();
	},
	methods: {
		initView() {
			this.boxWidth = this.sysInfo.windowWidth;
			this.boxHeight = this.sysInfo.windowHeight * 0.5;
			this.scrollHeight = this.boxHeight; // 滚动区域高度
			this.boxBottom = this.sysInfo.safeAreaInsets?.bottom + 45;
		},
		// ios手机需要实时计算弹幕文字高度,否则不会自动刷新到最新弹幕
		msgSrcoll() {
			try {
				let csq = uni.createSelectorQuery();
				csq.select('#id-live-message-scrollview')
					.boundingClientRect((res) => {
						this.msgListHeight = res.height;
						try {
							let csq2 = uni.createSelectorQuery();
							csq2.select('#id-msg-list')
								.boundingClientRect((res2) => {
									if (res2.height > this.msgListHeight) {
										this.scrollTop = res2.height - this.msgListHeight;
									}
								})
								.exec();
						} catch (e) {}
					})
					.exec();
			} catch (e) {}
		}
	}
};
</script>

<style lang="scss" scoped>
// 去除滚动条
// #ifndef APP-PLUS-NVUE
.live-msg-box ::-webkit-scrollbar {
	display: none;
	width: 0 !important;
	height: 0 !important;
	background: transparent;
	color: transparent;
	-webkit-appearance: none;
}
// #endif
.live-msg-box {
	width: 750rpx;
	/* #ifndef APP-PLUS-NVUE */
	box-sizing: border-box;
	/* #endif */
	padding: 24rpx;
	position: fixed;
	bottom: 120rpx;
	left: 0;
	z-index: 95;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	.live-message-scroll {
		width: 518rpx;
		height: 398rpx;
		border-radius: 24rpx;
		.chat-area-line {
			width: 518rpx;
			margin-bottom: 8rpx;
		}
		.live-msg-item {
			padding: 6rpx 16rpx;
			border-radius: 24rpx;
			line-height: 42rpx;
			background-color: rgba(0, 0, 0, 0.3);
			flex-direction: row;
			flex-wrap: wrap;
			width: 518rpx;
			margin-bottom: 8rpx;

			.sys-name {
				color: #ffffff;
				font-size: 28rpx;
			}
			.shop-avatar {
				width: 40rpx;
				height: 40rpx;
				border-radius: 30rpx;
				margin-right: 8rpx;
				overflow: hidden;
			}
			.shop-name {
				color: #9ab5fc;
				font-size: 28rpx;
			}
			.user-name {
				color: #ffffff;
				font-size: 28rpx;
			}
			.content {
				font-size: 28rpx;
				color: #ffffff;
			}
		}
	}
}
</style>
